<template>
    <section class="search-result-wrapper">
        <el-scrollbar height="610px">
            <template v-for="u of props.friendsList" :key="u.id">
                <section class="result-item">
                    <ContactItem :userDetail="u" />
                    <el-button type="primary" size="small" @click="addFriends(u)">添加</el-button>
                </section>
            </template>
        </el-scrollbar>
        <el-dialog style="padding: 20px !important;" v-model="dialogVisible" title="备注信息"
            width="40%" :before-close="handleClose">
            <section style="width: 100%;">
                <h4>备注信息</h4>
                <el-input v-model="message" style="width: 100%; margin-top: 20px;" placeholder="请输入申请好友备注信息"></el-input>
            </section>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmHandle">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </section>
</template>

<script setup>
import { ElNotification } from 'element-plus'
const props = defineProps({
    friendsList: {
        type: Array,
        default: () => ([])
    }
})

const emit = defineEmits(['listenResult'])

const dialogVisible = ref(false)
const userId = ref(0)
const message = ref('')

const addFriends = (f) => {
    userId.value = f.id
    dialogVisible.value = true

}

const confirmHandle = async () => {
    let res = await useMyFetchPostMultipart('/api/chat-friends/add/request', {
        body: {
            userId: userId.value,
            message: message.value
        }
    }).catch(err => { 
        ElNotification({  title:'提示', message:  err?.message || '申请失败', type: 'error'})
    })
    
    if(res?.result) {
        ElNotification({  title: '提示', message: '添加已申请，等待好友验证', type: 'success'})
        
        emit('listenResult')
    }
    dialogVisible.value = false
    message.value = ''
}

const handleClose = () => {

}

</script>
<style scoped lang="scss">
.search-result-wrapper {
    position: absolute;
    top: 46px;
    left: -5px;
    right: -5px;
    background-color: rgb(255, 255, 255);
    z-index: 100;

    .result-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        &:hover {
            background: #dbdbdb;
        }
    }
}
</style>